import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import './xxAddressInput.scss';
import BreadCrumb from "@/components/BreadCrumb";
import { ElInput, ElMessageBox } from "element-plus";
import { UserInfo } from "@/components/UserInfo";
import Keyboard from "@/components/keyboard";

export default defineComponent({
    setup() {
        const router = useRouter();
        const inputValue = ref('');
        const addressInputRef = ref<InstanceType<typeof ElInput> | null>(null);
        const showKeyboard = ref(false);
        const inputType = ref<'number' | 'normal' | 'letter'>('number');

        // 处理键盘提交
        const handleSubmit = (value: string) => {
            inputValue.value = value;
            // 判断输入手机号是否为空
            if (!inputValue.value.trim()) {
                // ElMessageBox({
                //     title: '提示！',
                //     message: () => <span style={{ fontSize: '188%' }}>请输入手机号！</span>,
                //     confirmButtonText: '确认',
                // })
                return;
            }
            router.push({
                path: '/HomePage',
                query: { address: inputValue.value },
            });
        };

        // 点击时显示键盘
        const handleInputClick = () => {
            showKeyboard.value = true;
        };

        //确定按钮
        const handleConfirm = () => {

        };
        // 添加点击事件监听器，当点击输入框时显示键盘
        // onMounted(() => {
        //     // 获取ElInput的原生input元素
        //     const inputElement = addressInputRef.value?.$el.querySelector('input');
        //     if (inputElement) {
        //         inputElement.addEventListener('click', handleInputClick);
        //     }
        // });
        // onUnmounted(() => {
        //     // 移除事件监听器，防止内存泄漏
        //     const inputElement = addressInputRef.value?.$el.querySelector('input');
        //     if (inputElement) {
        //         inputElement.removeEventListener('click', handleInputClick);
        //     }
        // });

        return () => (<>
            <UserInfo></UserInfo>
            <div class="address-input-container" onClick={handleInputClick}>
                <div class="title">
                        <BreadCrumb />
                </div>

                <div style={{height:"10%",display:'flex',justifyContent:'center'}} >
                    <ElInput
                        ref={addressInputRef}
                        type="number"
                        v-model={inputValue.value}
                        style={{
                            // marginLeft: '30%',
                            marginTop: '10%',
                            width: '40%',
                            height: '80%',
                            border: '2px solid #ccc',
                            fontSize: '30px',
                        }}
                        size="large"
                        placeholder="请输入手机号，点击此处输入"
                        readonly
                    />
                </div>
                {/*<button*/}
                {/*    style={{ marginLeft: '38%', marginTop: '2%' }}*/}
                {/*    onClick={handleConfirm}*/}
                {/*    class="confirm-btn"*/}
                {/*>*/}
                {/*    确认*/}
                {/*</button>*/}

            </div>
            <Keyboard
                modelValue={showKeyboard.value}
                value={inputValue.value}
                type={inputType.value} //键盘类型： /数字字母 normal /纯字母 letter /纯数字 number
                onUpdate:modelValue={(value) => showKeyboard.value = value}
                onUpdate:value={(value) => inputValue.value = value}
                onKeySubmit={handleSubmit}
            />
        </>);
    },
});
